import React, { Fragment, useState } from 'react';
import { Card, Content, Text, Select } from 'react-fule-ui';
import './index.scss';

// 代码块
import CMarkdown from './../../components/CMarkdown';
// 数据
import { Demo1, Demo2, Demo3 } from './demo.js';

export default function FuleText() {
  const [num, setNum] = useState(4);
  const onClick = (data) => {
    setNum(data);
  };
  const info = (
    <Fragment>
      <p>
        她偷偷跑进去，里面的人似乎没有发现。她心想：这也太没危机意识了。她蹑手蹑脚走进屋里，里面有些乱，但是还算干净，桌子上放着茶具，似乎好久没用过，有一层薄薄的灰，沙发看起来有点上了年代，里面传来哗啦啦的声响，她忍不住往前靠，想看个究竟。越靠近心跳的越厉害，那是水声，有模糊的影子，我不能，我不能，继续往前，她脑子有点乱，思想斗争了好久，她终于还是理智了一回...
      </p>
      <p>
        她退出房间了，心头不断起伏，她想等他洗好澡。终于她听不到水声，她假装关了门，又敲起了房门。嘭嘭嘭。
      </p>
    </Fragment>
  );
  return (
    <Fragment>
      <Content>
        <Content.Header>文案 Text</Content.Header>
        <Content.Body>
          <Card>
            <Card.Header>颜色</Card.Header>
            <Card.Body>
              <p>
                <Text info="#000000" />
              </p>
              <p>
                <Text theme="normal" info="#333333" />
              </p>
              <p>
                <Text theme="weak" info="#666666" />
              </p>
              <p>
                <Text theme="error" info="#e54545" />
              </p>
              <p>
                <Text theme="success" info="#0abf5b" />
              </p>
              <p>
                <Text theme="link" info="#0068ed" />
              </p>
              <CMarkdown data={Demo1} style={{ marginTop: '16px' }} />
            </Card.Body>
          </Card>
          <Card>
            <Card.Header>对齐</Card.Header>
            <Card.Body>
              <div className="dome-text">
                <Text
                  type="div"
                  theme="normal"
                  info="左对文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文abc案文案"
                  align="left"
                />
              </div>
              <div className="dome-text">
                <Text
                  type="div"
                  theme="normal"
                  info="居中文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文abc案文案"
                  align="center"
                />
              </div>
              <div className="dome-text">
                <Text
                  type="div"
                  theme="normal"
                  info="右对文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文abc案文案"
                  align="right"
                />
              </div>
              <div className="dome-text">
                <Text
                  type="div"
                  theme="normal"
                  info="两端对齐文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文abc案文案"
                  align="justify"
                />
              </div>
              <div className="dome-text">
                <Text
                  theme="normal"
                  info="baseline"
                  verticalAlign="baseline"
                  style={{ background: '#ff7200' }}
                />
                <Text
                  theme="normal"
                  info="baseline"
                  verticalAlign="baseline"
                  style={{ background: '#2d83d2' }}
                />
              </div>
              <div className="dome-text">
                <Text
                  theme="normal"
                  info="baseline"
                  verticalAlign="baseline"
                  style={{ background: '#ff7200' }}
                />
                <Text
                  theme="normal"
                  info="top"
                  verticalAlign="top"
                  style={{ background: '#2d83d2' }}
                />
              </div>
              <div className="dome-text">
                <Text
                  theme="normal"
                  info="baseline"
                  verticalAlign="baseline"
                  style={{ background: '#ff7200' }}
                />
                <Text
                  theme="normal"
                  info="middle"
                  verticalAlign="middle"
                  style={{ background: '#2d83d2' }}
                />
              </div>
              <div className="dome-text">
                <Text
                  theme="normal"
                  info="baseline"
                  verticalAlign="baseline"
                  style={{ background: '#ff7200' }}
                />
                <Text
                  theme="normal"
                  info="bottom"
                  verticalAlign="bottom"
                  style={{ background: '#2d83d2' }}
                />
              </div>
              <div className="dome-text">
                <Text
                  theme="normal"
                  info="baseline"
                  verticalAlign="baseline"
                  style={{ background: '#ff7200' }}
                />
                <Text
                  theme="normal"
                  info="text-top"
                  verticalAlign="text-top"
                  style={{ background: '#2d83d2' }}
                />
              </div>
              <div className="dome-text">
                <Text
                  theme="normal"
                  info="baseline"
                  verticalAlign="baseline"
                  style={{ background: '#ff7200' }}
                />
                <Text
                  theme="normal"
                  info="text-bottom"
                  verticalAlign="text-bottom"
                  style={{ background: '#2d83d2' }}
                />
              </div>
              <CMarkdown data={Demo2} style={{ marginTop: '16px' }} />
            </Card.Body>
          </Card>
          <Card>
            <Card.Header>溢出情况</Card.Header>
            <Card.Body>
              <div className="dome-text">
                <Text
                  overflow="1"
                  info="我是文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案"
                />
              </div>
              <div className="dome-text">
                <Text
                  overflow="2"
                  info="我是文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案"
                />
              </div>
              <div className="dome-text">
                <Text
                  overflow="3"
                  info="我是文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案我是文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案"
                />
              </div>
              <div className="dome-text">
                <Text
                  overflow="4"
                  info="我是文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案我是文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案"
                />
              </div>
              <div className="dome-text">
                <Select defaultValue="4" onChange={onClick} size="full">
                  {[...Array(50)].map((item, index) => (
                    <Select.Item key={index}>{index + 1}</Select.Item>
                  ))}
                </Select>
                <Text overflow={num} show="more" info={info} />
              </div>
              <CMarkdown data={Demo3} style={{ marginTop: '16px' }} />
            </Card.Body>
          </Card>
        </Content.Body>
      </Content>
    </Fragment>
  );
}
